首先，准备一台可以用的 PC 或者 MAC，这点就不多赘述了，软件对配置的要求不高，配置凑合下并没有太多的影响。然后，就是开始进行软件层面的准备了，尽量用电脑打开。

下面是目录：

Windows/Mac 系统

Adobe XD、PS、AI、AE

Sketch

Flinto、Principle、Figma

同步盘工具

Eagle、花瓣Pro

笔记软件

浏览器和插件



无论目前使用 PC 还是 MAC，都确保已经更新到最新的系统版本，有关设计的软件及工具大多对系统版本会有要求，老版本很可能无法安装。

MacOS：

要求 MacOS 10.11 及 更高版本，低于此版本直接在 App Store 中更新系统即可。

Windows：

要求 Windows 10 （64 位）– 1703 版本 及 更高版本。建议直接安装最新的家庭版或者专业版Win10 系统。

动手能力强的可以到下方 Win10 官方网站下载安装；不会安装的同学可以选择 淘宝远程安装 或 找朋友帮忙安装。

微软官方 Win 10 下载地址：

https://www.microsoft.com/zh-cn/

software-download/windows10



目前的新版 Adobe 软件已经不是单独去找安装包了，那样只有老的版本，而且安装隐患特别多。

推荐安装 Adobe CC 2019 版本，直接通过官方的 Adobe Creative Cloud 进行安装，安装完成后选择想安装的软件安装即可，前期推荐安装 XD、Photoshop (PS)、illustrator (Ai) 和 After Effect (AE)。


Adobe Creative Cloud：下载地址

 https://creativecloud.adobe.com

/apps/download/creative-cloud

Adobe 破解器（Mac）：下载地址

 https://www.macbl.com

/app/utilities/adobe-zii

Adobe 破解器（Win）：下载地址

 http://www.lookae.com/?s=GenP



设计 UI 界面所使用的主流软件并不是 PS 和 AI，因为它们功能太多太复杂，而是会使用一些比较轻量化的软件。以下三个软件可以挑选一个为自己的主力工具。

Skech 是 MAC 平台下必备的 UI 设计软件，也是目前最主流的 UI 轻量化设计工具。但是它只能在 Mac 下运行，所以 Windows 用户无法使用。

下载地址 http://www.qijishow.com/

down/Sketch_new.html



XD是一款 Adobe 提供的 UI 设计软件，功能目前还不够完善，但是可以完成基本的 UI 界面设计。它的主要优点是 Windows 中也有，且属于免费软件，可以在前面提到的 ACC 中下载。



Figma是近两年的设计界新贵，目前在国外已经力压 XD 成为使用率第 2 的设计软件，其特点是采用网页进行操作，可以多人同事处理一个文件，跨平台运作。

官网地址 https://www.figma.com/



如果使用 Mac 系统，那么在 Mac 中有不少可以制作交互动画和动效的软件，以下几款可以都先了解后再自行选择下载。

Flinto是一款交互原型设计工具，可以和 sketch 无缝对接，通过插件就可以把素材导入 flinto。适合制作一些页面量大，但只具备简单动效的可交互原型。

下载地址 

http://www.qijishow.com

/down/Flinto.html


Principle 是一款交互原型设计工具，操作简单易上手，对动画细节方面的调节更为丰富，所以更适合做页面不多，动画细腻的 demo。

下载地址

 http://www.qijishow.com/

down/Principle.html



Framer也是一款交互原型设计工具，与 Flinto 和 Principle 最大的不同在于 Framer 提供了代码模块，可以利用 coding 实现许多设计变化和交互细节，所以做出来的交互拟真程度更高，适合对 React、TypeScript 和 ES6 有一定了解的设计师。

下载地址

 http://www.qijishow.com/

down/Framer.html

Windows 上唯一能用来做交互动效的软件只有 AE 和 C4D，而 C4D 更偏向三维所以不推荐用来做 UI 动效。

After Effect 极其强大但学习成本相对也比较高的动效软件，可以深度调节动效中所涉及的你能想到的一切细节。不过 UI 动效所涉及的知识点对 AE 来说实在九牛一毛，所以不用害怕。适合 windows 用户，或用来制作动效炫酷的概念 demo。可以在前面提到的 ACC 中下载。



之前很多文章已经写过，同步盘在现代工作中的必要性。同步盘可以保证我们的资料和源文件的安全性和无缝多设备同步，建议每个设计师都使用起来。国内主要使用以下两款同步盘工具。

iCloud苹果家的同步工具，拥有 Mac/Win 双版本，相信使用苹果设备的旁友不会陌生。最重要的是价格便宜。比较适合 iPhone 或 Mac 任有其一的个人用户，不太适合 Android+Win 配置的用户，因为 iCloud 没有安卓版本。

官方网站 https://www.apple.com/cn/icloud/

坚果云 国内颇受欢迎的全平台同步工具，文件(夹)分享比 iCloud 更方便快捷，付费用户支持保留文件早期版本，适合多成员团队协作，当然个人用户也完全 OK。

官方网站 https://www.jianguoyun.com/



设计师日常有收集整理素材、灵感图片的需求。直接使用文件夹管理的方式非常落后，行业已经慢慢过渡到使用软件+同步盘的结合方式来整理和备份我们日常的素材及灵感图片库了。

Eagle适用于本地的图标素材管理软件，Mac/Win 双版本。支持绝大多数图片格式，甚至 psd 和 sketch 文件。因为所有素材都存在本地，所以库文件通常较大，且会越来越大，所以适合硬盘比较大或有移动硬盘的用户，搭配同步盘也可实现多端同步功能。一次买断制。

官方网站 https://cn.eagle.cool



花瓣 Pro是花瓣网推出的素材管理客户端，支持 Mac/Win。目前基础功能基本已经实现，但支持的图片格式还比较有限。最大的特点在于与花瓣联动，自带网络同步功能，且存在本地的只是缩略图，所以占用体积较小，也正是这一点，原图无法随取随用。适合本地存储介质较小，或本来在花瓣就已经有大量收集的用户。月费订阅制。

官方网站 https://pro.huaban.com/

除了有关图形文件的记录以外，在学习过程中也需要我们大量做笔记或者记录我们的想法与经验，所以笔记和思维导图工具对于我们也是必装的软件。

Windows：
印象笔记是一款功能全面且强大的笔记软件，国区独立之后开发了 Markdown 模式和思维导图模式，颇戳中用户痛点。它最强的能力莫过于全平台资料收集、整理的能力，高级搜索使得文本、图片的调用变得异常简单。但是繁复冗杂的界面使码字和 Markdown 毫无体验可言。适合重度资料收集-整理癖，对界面美感无要求，以及对简单演示有需求的用户。

官方网站 https://www.yinxiang.com/



OneNote 是一款微软家的免费笔记应用，全平台支持。操作逻辑与它的 Office 兄弟们一脉相承，学习成本四舍五入约等于零。笔记本系统层次分明，树状结构适合知识管理。适合选择 Onedrive 作为同步工具，以及在 Office 全家桶洗礼下的用户。

官方网站 

https://products.office.com

/en-us/onenote/digital-note-taking-app



Mac：

Ulysses是 Mac 中最好用也最富盛名的 Markdown 工具，界面与 MacOS 融为一体极为美观。收集和整理能力较差，但是沉浸的码字体验无人能出其右。适合轻度收集、重度记录，时常需要用思考、写作来消化和输出知识的用户。

官方网站 https://ulysses.app/



Bear 熊掌记是一款介于印象笔记和 Ulysses 之间的轻量化笔记工具，没有两者在各自的领域做到那么极致，但兼顾了两者的优点，适合中度收集整理、中度写作的用户。

官方网站 https://bear.app/



Mindnode是一款轻量的思维导图软件，有且只专注于思维导图的制作和输出，在体验上也是领域内的佼佼者。界面简单大方，学习成本几乎没有。只适用于制作思维导图的场景。

官方网站 https://mindnode.com





下面的插件大部分是 Chrome 插件，如果提到了「Chrome 商店安装」，则需要 VPN 才能到商店安装；如果没提到，那么就是有官方的下载渠道，可以离线安装，Chrome 插件的离线安装方法参考这篇文章。

Axhub Icons可以以 SVG 格式一键复制 iconfont 中图标的 Chrome 插件，适合 XD 用户，不适合 Sketch 用户 (Sketch 用户可以使用后面提到的 Kitchen)。

下载地址 https://axhub.im/chrome/

MuzliInvision 推出的 Chrome 首页插件，每天提供全网最高质量的设计图片，可作为日常设计灵感来源。推荐所有人安装。

Chrome 商店安装

 https://chrome.google.com/

webstore/detail/muzli-2-stay-

inspired/glcipcfhmopc

gidicgdociohdoicpdfc

Whatfont 是一款 Chrome 插件，用来查看网页上所用到的字体、字号、颜色，觉得哪个网页上的字体让你心动了，就可以看一下。

Chrome 商店安装 

https://chrome.google.com

/webstore/detail/whatfont/jabop

obgcpjmedljpbcaablpmlmfcogm

Eagle可以直接采集网页上的图片至 Eagle，适合 Eagle 用户。支持各大主流浏览器。

下载地址 https://cn.eagle.cool/extensions

Kitchen 是一款在 sketch 上的插件集，提供了丰富的功能。最常用的莫过于整合 iconfont 图标，一键拖拽到 sketch 画布中的功能，极为方便。适合 sketch 用户。

下载地址 https://kitchen.alipay.com/



本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：超人的电话亭！